<template>
	<div class="div_wrapper banner_page">
		<div class="content_wrapper">
			<el-row class="my_row">
				<el-col :span="24">
					<el-upload action="/api/SysSetting/AddBanners" :file-list="bannerList" name="file" list-type="picture-card" :before-upload="handleBeforeUpload" :before-remove="handleRemove">
						<p>
							<i class="el-icon-circle-plus-outline">上传图片</i>
						</p>
					</el-upload>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import Vue from "vue";

	export default {
		name: "settime",
		data() {
			return {
				bannerList: [],
			};
		},

		created() {
			this.GetData();
		},
		methods: {
			GetData() {
				let that = this;
				that.postAxios("/SysSetting/GetBanners", null).then((res) => {
					if(res.code == 0) {
						//						that.bannerList = res.data;
						let arr = res.data;
						let newArr = [];
						//处理数据格式
						for(let i = 0; i < arr.length; i++) {
							let obj = {
								name: i,
								url: that.imgBaseURL + arr[i],
							};
							newArr.push(obj);
						}
						that.bannerList = newArr;
					}
				});
			},
			handleBeforeUpload(file) {
				//				this.GetData();
			},
			handleRemove(file, fileList) {
				let that = this;
				console.log('fileList', fileList)
				console.log('file', file)

				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {

						let name_arr = file.url.split("/");
						let pic_name = name_arr[name_arr.length - 1];
						that.postAxios("/SysSetting/DelBanners", [pic_name]).then((res) => {
							if(res.code == 0) {
								that.$notify({
									title: "成功",
									message: "操作成功",
									type: "success",
								});
								//假删除处理
								let fuid = file.uid;
								let farr = fileList;
								for(let i = 0; i < farr.length; i++) {
									if(fuid == farr[i].uid) {
										farr.splice(i, 1);
									}
								}
							} else {
								that.$notify.error({
									title: "错误",
									message: "操作失败",
								});
							}
						});

					})
					.catch(() => {

					});
				return false
				//获取名字
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
	};
</script>

<style scoped lang="scss">
	.w400 {
		width: 400px;
	}
	
	.banner_page .el-upload-list--picture-card .el-upload-list__item {
		width: 340px !important;
		height: 300px;
	}
	
	.div_wrapper {
		height: 100%;
		width: 100%;
		background: #fff;
	}
	
	.content_wrapper {
		padding: 30px;
		/*background: #fff;
    border: 1px solid #ddd;*/
		/*border-radius: 5px;*/
		/*min-height: 500px;*/
		.my_row {}
	}
</style>
<style type="text/css">
	.el-upload-list--picture-card {
		width: 100%;
		background: #fff;
		overflow: hidden;
	}
	
	.banner_page .el-upload-list--picture-card .el-upload-list__item {
		width: 32.333% !important;
		height: 200px;
		margin: 0.5% 0.5% 0 0.5%;
	}
	
	.el-upload-list--picture-card .el-upload-list__item {
		background: #eff3fd;
		padding: 20px;
		border-radius: 3px;
		border: none;
	}
	
	.el-upload--picture-card {
		width: 32.333% !important;
		height: 200px;
		line-height: 200px;
		margin: 0.5% 0.5% 0 0.5%;
		border: none;
		background: #f5f5f5;
		border-radius: 3px;
		color: #409eff;
	}
	
	.el-upload--picture-card i {
		color: #409eff;
		font-size: 20px;
	}
</style>